﻿:root {
    /** sunny side **/
    --blue-background: linear-gradient(to right, #5d9fff, #b8dcff,#6bbbff);
    --blue-border: #5fa0ff;
    --blue-color: #6bbbff;
    --yellow-background: #fffaa8;
    --yellow-border: #f5eb71;
    /** dark side **/
    --indigo-background: linear-gradient(to right, #14526f,#194356);
    --indigo-border: #10253c;
    --indigo-color: #194356;
    --gray-border: #e8e8ea;
    --gray-dots: #e8e8ea;
    /* * general **/
    --white: #fff;
}

* {
    margin: 0;
    padding: 0;
}



.background {
    position: absolute;
    left: 0;
    top: 0;
    /*#5d9fff → #b8dcff → #6bbbff  白天渐变色*/
    background: var(--blue-background);
    /*z-index: -1;*/
    width: 100%;
    height: 100%;
    transition: all 250ms ease-in;
}

.toggle--checkbox {
    display: none;
}

    .toggle--checkbox:checked {
        /** This will all flip from sun to moon **/
        /** Change the label color **/
    }

        .toggle--checkbox:checked ~ .background {
            /* 夜晚渐变色 */
            background: var(--indigo-background);
        }

        
        

        .toggle--checkbox:checked + .toggle--label {
            background: var(--indigo-color);
            border-color: var(--indigo-border);
            /** Change the cloud to stars **/
            /** Change the sun into the moon **/
            /** Show the dimples on the moon **/
        }

            .toggle--checkbox:checked + .toggle--label .toggle--label-background {
                left: 30px;
                width: 5px;
            }

                .toggle--checkbox:checked + .toggle--label .toggle--label-background:before {
                    width: 5px;
                    height: 5px;
                    top: -15px;
                }

                .toggle--checkbox:checked + .toggle--label .toggle--label-background:after {
                    width: 5px;
                    height: 5px;
                    left: -25px;
                    top: 10px;
                }

            .toggle--checkbox:checked + .toggle--label:before {
                background: var(--white);
                border-color: var(--gray-border);
                animation-name: switch;
                animation-duration: 350ms;
                animation-fill-mode: forwards;
            }

            .toggle--checkbox:checked + .toggle--label:after {
                transition-delay: 350ms;
                opacity: 1;
            }

.toggle--label {
    /** Placeholder element, starting at blue **/
    width: 100px;
    height: 50px;
    background: var(--blue-color);
    border-radius: 100px;
    border: 5px solid var(--blue-border);
    display: flex;
    position: relative;
    transition: all 350ms ease-in;
    /** The sun cloud and moon stars **/
    /** Sun/Moon element **/
    /** Gray dots on the moon **/
}

.toggle--label-background {
    width: 8px;
    height: 5px;
    border-radius: 2px;
    position: relative;
    background: var(--white);
    left: 70px;
    top: 23px;
    transition: all 150ms ease-in;
}

    .toggle--label-background:before {
        content: "";
        position: absolute;
        top: -4px;
        width: 30px;
        height: 4px;
        border-radius: 5px;
        background: var(--white);
        left: -15px;
        transition: all 150ms ease-in;
    }

    .toggle--label-background:after {
        content: "";
        position: absolute;
        top: 5px;
        width: 30px;
        height: 4px;
        border-radius: 5px;
        background: var(--white);
        left: -7px;
        transition: all 150ms ease-in;
    }

.toggle--label:before {
    animation-name: reverse;
    animation-duration: 350ms;
    animation-fill-mode: forwards;
    transition: all 350ms ease-in;
    content: "";
    width: 40px;
    height: 40px;
    border: 5px solid var(--yellow-border);
    top: 0px;
    left: 0px;
    position: absolute;
    border-radius: 82px;
    background: var(--yellow-background);
}

.toggle--label:after {
    transition-delay: 0ms;
    transition: all 250ms ease-in;
    position: absolute;
    content: "";
    box-shadow: var(--gray-dots) -13px 0 0 2px, var(--gray-dots) -24px 14px 0 -2px;
    left: 143px;
    top: 23px;
    width: 10px;
    height: 10px;
    background: transparent;
    border-radius: 50%;
    opacity: 0;
}

@keyframes switch {
    0% {
        left: 4px;
    }

    60% {
        left: 4px;
        width: 40px;
    }

    100% {
        left: 50px;
        width: 40px;
    }
}

@keyframes reverse {
    0% {
        left: 50px;
        width: 40px;
    }

    60% {
        left: 4px;
        width: 40px;
    }

    100% {
        left: 4px;
    }
}
